<template>
  <div class="screen-container">
    <div class="screen-content">
      <!-- 在这里添加大屏内容 -->
      <div class="bigTime">
        <DeteTime />
      </div>
      <div class=" numberData">
        <numberData />
      </div>
      <div class="top_title">
        <div class="title_txt ysbt">安全技能实训中心</div>
      </div>
      <div class="main">
        <div class="main_l">
          <div class="box_1 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">数据总览</div>
                <div class="title_txt_en ysbt">data screening</div>
              </div>
            </div>
            <div class="nums">
              <div class="num_box">
                <div class="num_img">
                  <img src="../assets/images/dz1.png" alt="" />
                </div>
                <div class="num_title">历史培训次数(次)</div>
                <div class="num_txt pangmenzhengdao">
                  {{ homeData.historyTrainingNum }}
                </div>
              </div>
              <div class="num_box">
                <div class="num_img">
                  <img src="../assets/images/dz2.png" alt="" />
                </div>
                <div class="num_title">参训人数(人)</div>
                <div class="num_txt pangmenzhengdao">
                  {{ homeData.historyUsergNum }}
                </div>
              </div>
              <div class="num_box">
                <div class="num_img">
                  <img src="../assets/images/dz3.png" alt="" />
                </div>
                <div class="num_title">历史培训时长(分钟)</div>
                <div class="num_txt pangmenzhengdao">
                  {{ homeData.historyTrainingTime }}
                </div>
              </div>
            </div>
          </div>
          <div class="box_1 box_2 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">设备状态</div>
                <div class="title_txt_en ysbt">Equipment status</div>
              </div>
            </div>
            <div style="margin-top: -20px">
              <div class="ring_bg">
                <div class="ring_title">设备使用率</div>
                <div class="nbs">
                  <div class="pangmenzhengdao">
                    <!-- data2[0] + data[1] / data2 num -->
                    {{ homeData.deviceUseRate }}
                  </div>
                  <span>%</span>
                </div>
                <div class="nbs_list">
                  <div class="nbs2">
                    <div class="pangmenzhengdao">
                      <!-- data2[0] + data[1] / data2 num -->
                      {{ homeData.deviceUseRate }}
                    </div>
                    <span>%</span>
                  </div>
                  <div class="nbs2">
                    <div class="pangmenzhengdao">
                      <!-- data2[0] + data[1] / data2 num -->
                      {{ homeData.onDeviceNumRate }}
                    </div>
                    <span>%</span>
                  </div>
                  <div class="nbs2">
                    <div class="pangmenzhengdao">
                      <!-- data2[0] + data[1] / data2 num -->
                      {{ homeData.offDeviceNumRate }}
                    </div>
                    <span>%</span>
                  </div>
                </div>
              </div>
              <div class="box_ring">
                <PieCharts
                  v-if="data2 && data2.length"
                  type="ring"
                  :seriesData="
                    data2.map((item, index) => {
                      return {
                        name: ['使用中', '在线', '离线'][index],
                        value: item,
                      };
                    })
                  "
                ></PieCharts>
              </div>
            </div>
          </div>
          <div class="box_1 box_3 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">人员排行榜</div>
                <div class="title_txt_en ysbt">Personnel Ranking List</div>
              </div>
            </div>
            <div class="b1">
              <div style="width: 100%; padding: 7px 0">
                <div class="tab_header">
                  <div class="t1">排名</div>
                  <div class="t2">姓名</div>
                  <div class="t3">单位</div>
                  <div class="t4">训练时长</div>
                </div>
                <div class="tab_box_list">
                  <div
                    :class="'tab_box' + ' tab_box_' + (index + 1)"
                    :key="index"
                    v-for="(item, index) in homeData.trainingUserList"
                  >
                    <div class="t1"><div :class="'t1_img_' + (index + 1)" ></div>{{ index + 1 }}</div>
                    <div class="t2">{{ item.nickName }}</div>
                    <div class="t3">{{ item.deptName }}</div>
                    <div class="t4">{{ item.totalTrainingTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main_m">
          <div class="m_nbs">
            <div class="nb_left">
              <div class="nb_left_title">今日人流量</div>
              <div class="nb_left_text">
                <div class="nb_left_text_1 pangmenzhengdao">
                  <span
                    :key="index"
                    v-for="(value, index) in Array.from(
                      '' + (homeData.todayUserNum || 0)
                    ).map(Number)"
                  >
                    {{ value }}
                  </span>
                </div>
              </div>
            </div>
            <div class="nb_left nb_right">
              <div class="nb_left_title">今日培训时长</div>
              <div class="nb_left_text">
                <div class="nb_left_text_1 pangmenzhengdao">
                  <span
                    :key="index"
                    v-for="(value, index) in Array.from(
                      '' + (homeData.todayTrainingTime || 0)
                    ).map(Number)"
                  >
                    {{ value }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="big_img">
            <img :src="bigImage" alt="" />
          </div>

          <div class="box_1 box_2 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">近三十日数据</div>
                <div class="title_txt_en ysbt">
                  Data from the past thirty days
                </div>
              </div>
            </div>

            <div class="box_ring">
              <lineRingCharts
                :lineData="
                  homeData.thirtyTrainingUserList
                    ? homeData.thirtyTrainingUserList.map(
                        (item) => item.trainingUserNum
                      )
                    : []
                "
                :barData="
                  homeData.thirtyTrainingUserList
                    ? homeData.thirtyTrainingUserList.map(
                        (item) => item.totalTrainingTime
                      )
                    : []
                "
              >
              </lineRingCharts>
            </div>
          </div>
        </div>
        <div class="main_r">
          <div class="box_1 box_2 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">时段活跃度</div>
                <div class="title_txt_en ysbt">Time period activity level</div>
              </div>
            </div>

            <div class="box_ring">
              <barCharts
                :barData="
                  homeData.todayActivityList
                    ? homeData.todayActivityList.map(
                        (item) => item.trainingCount
                      )
                    : []
                "
                :categories="
                  homeData.todayActivityList
                    ? homeData.todayActivityList.map((item) => item.timeName)
                    : []
                "
              >
              </barCharts>
            </div>
          </div>
          <div class="box_1 box_3 box-bg">
            <div class="box_title">
              <div class="box_title_main">
                <img
                  class="title_img"
                  src="../assets/images/icon_gif.gif"
                  alt=""
                />

                <div class="title_txt ysbt">项目列表</div>
                <div class="title_txt_en ysbt">Item List</div>
              </div>
            </div>
            <div class="card_list">
              <Vue3SeamlessScroll
                :step="0.17"
                :list="homeData.deviceInfoList || []"
                :visibleCount="6"
                ref="scrollRef"
              >
                <template v-slot="{ data }">
                  <div class="tab_box_list">
                    <!-- <div class="t1">{{ data.softName }}</div>
                      <div class="t2">{{ data.totalHours }}</div>
                      <div class="t3">{{ data.useNum }}</div> -->

                    <div class="tab_box_list_top">
                      <div
                        :class="{
                          top_nb: true,
                          ysbt: true,
                          pangmenzhengdao: true,
                          top_nb_1: data.idx === 2,
                          top_nb_2: data.idx >= 3,
                        }"
                      >
                        Top{{ data.idx }}
                      </div>
                      <div class="top_msg">
                        <div class="msg_nb">
                          {{ data.softName }}
                        </div>
                        <div class="msg_ring">
                          <div
                            :class="{
                              msg_ring_active: true,
                              msg_ring_active_1: data.idx === 2,
                              msg_ring_active_2: data.idx >= 3,
                            }"
                            :style="`width:${(data.totalHours * 100) / 24}%`"
                          ></div>
                        </div>
                      </div>
                      <div class="top_hours">
                        <div class="pangmenzhengdao">{{ data.totalHours }}</div> <div class="hst">小时</div>
                      </div>
                    </div>
                    <div class="tab_box_list_main">
                      <div class="mn_msg">
                        <div class="msg_1">统计</div>
                        <div class="msg_2">OVERVIEW</div>
                      </div>
                      <div class="btn">
                        <div class="btn_1">当前训练人数</div>
                        <div class="btn_2 pangmenzhengdao">{{data.useNum}}</div> 
                      </div>
                    </div>
                    <img class="line_img" src="../assets/images/part_5_line.png" alt="">
                  </div>
                </template>
              </Vue3SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div class="bot_img">
        <div class="bot_img_2"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Vue3SeamlessScroll from "./../components/Vue3SeamlessScroll.vue";
import DeteTime from "./../components/deteTime.vue";
import numberData from "./../components/numberData.vue";
import { ref, onMounted, onUnmounted, watch } from "vue";
import {
  getPersonnel,
  defectAnalysis,
  runningTaskPlan,
  filmTasks,
  errorList,
  getRealTime,
  getImageInfo,
} from "./../api/index.ts";
import Charts from "./../components/ring.vue";
import PieCharts from "./../components/pieCharts.vue";
import lineRingCharts from "./../components/lineRingCharts.vue";
import barCharts from "./../components/barCharts.vue";
// 获取路由url中的参数
import { useRoute } from "vue-router";
const route = useRoute();
console.log("route.query", route.query);
let depId = ref(route.query.depId);
watch(
  () => route.query.depId,
  (newVal, oldVal) => {
    depId.value = newVal;
  }
);
const count = ref(0);
// 定时器引用
let personnelTimer = null;
let otherTimer = null;
const filtersStatus = (status) => {
  switch (status) {
    case "1":
      return "进行中";
    case "0":
      return "未开始";
    case "3":
      return "已完成";
    default:
      return "";
  }
};
const filtersStatus2 = (status) => {
  switch (status) {
    case "1":
      return "进行中";
    case "0":
      return "未开始";
    case "3":
      return "已完成";
    default:
      return "";
  }
};
const bigImage = ref("");
const scrollRef = ref(null);
const data2 = ref([]);
const homeData = ref({
});
// 动态调整缩放比例
const adjustScale = () => {
  const container = document.querySelector(".screen-container");
  if (container) {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const scale = width / 1920;
    if (scale < 1) {
      container.style.transform = `scale(${1})`;
      container.style.transformOrigin = "top left";
      container.style.width = "1920px";
      container.style.height = "1080px";
      return;
    }
    container.style.transform = `scale(${scale})`;
    container.style.transformOrigin = "top left";
    container.style.width = "1920px";
    container.style.height = "1080px";
  }
};

const editSeamlessScrollRef = (seamlessScrollRef, data) => {
  seamlessScrollRef.value.remove(0, seamlessScrollRef.value.targetList.length);
  setTimeout(() => {
    seamlessScrollRef.value.add(0, data);
  });
};

const getRealTimeData = async () => {
  const res = await getRealTime(depId.value);
  console.log("res", res);
  if (res.code === 200) {
    let data = res.data;
    homeData.value = data;
    let { useDeviceNum, onDeviceNum, offDeviceNum } = data;
    data2.value = [useDeviceNum, onDeviceNum, offDeviceNum];
    homeData.value.deviceUseRate = Math.round(
      ((onDeviceNum + useDeviceNum) /
        (useDeviceNum + onDeviceNum + offDeviceNum)) *
        100
    );

    homeData.value.onDeviceNumRate = Math.round(
      (onDeviceNum / (useDeviceNum + onDeviceNum + offDeviceNum)) * 100
    );
    homeData.value.offDeviceNumRate = Math.round(
      (offDeviceNum / (useDeviceNum + onDeviceNum + offDeviceNum)) * 100
    );
    editList();
    homeData.value.deviceInfoList = homeData.value.deviceInfoList.map(
      (item, index) => {
        return {
          ...item,
          idx: index + 1,
        };
      }
    );
  } else {
    console.error("getRealTimeData失败", res.msg);
  }
};
//重新更新数据
function editList() {
  editSeamlessScrollRef(scrollRef, homeData.value.deviceInfoList || []);
}
const getBigImage = async () => {
  const res = await getImageInfo(depId.value);
  bigImage.value = import.meta.env.VITE_BASE_API_URL + res.data.bigScreenUrl;
};
onMounted(() => {
  adjustScale();
  window.addEventListener("resize", adjustScale);

  getRealTimeData(); //新
  getBigImage(); //新
  personnelTimer = window.setInterval(() => {
    getRealTimeData(); //新
  }, 2 * 60 * 1000);
});
onUnmounted(() => {
  window.removeEventListener("resize", adjustScale);

  if (personnelTimer !== null) {
    clearInterval(personnelTimer);
    personnelTimer = null;
  }
  if (otherTimer !== null) {
    clearInterval(otherTimer);
    otherTimer = null;
  }
});
</script>

<style scoped lang="less" src="./../assets/home.less"></style>
